<template>
  <div class="content-box" v-loading="loading">
    <el-form :model="form" :rules="rules" ref="formRef" >
    <!-- 渠道信息 -->
     <div class="channelInfo">
        <div class="ch_title">渠道信息</div>  
        <div class="content">
          <div class="flex-sb">
            <el-form-item label="渠道名称" prop="productName" style="width: 50%;margin-right: 35px;">
              <el-input
                :disabled="isView"
                v-model="form.productName"
                placeholder="请输入"
                clearable
              />
            </el-form-item>
            <el-form-item label="渠道简称" prop="simpleName" style="width: 50%;">
              <el-input
                :disabled="isView"
                v-model="form.simpleName"
                placeholder="请输入"
                clearable
              />
            </el-form-item>
          </div>
          <div class="flex-sb">
            <el-form-item
               label="渠道类型"
               prop="productType"
               style="width: 50%;margin-right: 35px;"
              >
               <el-select
                 v-model="form.productType"
                 clearable
                 filterable
                 placeholder="请选择"
                 style="width: 100%"
                 :disabled="isView"
               >
                 <el-option
                   v-for="(item, index) in productTypeOption"
                   :key="index"
                   :label="item.label"
                   :value="item.value"
                 ></el-option>
               </el-select>
            </el-form-item>
            <el-form-item label="每秒限流" prop="checkNum" style="width: 50%;">
              <el-input-number 
                v-model="form.checkNum" 
                controls-position="right" 
                placeholder="请输入（每秒钟可以撞库的次数）"
                :min="0" 
                style="width: 100%;"
                :disabled="isView"
              >
              </el-input-number>
            </el-form-item>
          </div>
          <div class="flex-sb">
            <el-form-item label="关联上游公司" prop="companyId" style="width: 50%;margin-right: 35px;">
              <el-select
               v-model="form.companyId"
               clearable
               filterable
               placeholder="请选择"
               style="width: 100%"
               :disabled="isAdd"
              >
                <el-option
                 v-for="(item, index) in companyIdOption"
                 :key="index"
                 :label="item.companyName"
                 :value="item.id"
                 ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item
               label="渠道标签"
               prop="productLabel"
               style="width: 50%"
               :disabled="isView"
              >
               <el-select
                 v-model="form.productLabel"
                 clearable
                 filterable
                 placeholder="请选择"
                 style="width: 100%"
                 :disabled="isView"
               >
                 <el-option
                   v-for="(item, index) in productLabelOption"
                   :key="index"
                   :label="item.label"
                   :value="item.value"
                 ></el-option>
               </el-select>
            </el-form-item>
          </div>
          <div class="flex-sb">
            <!-- <el-form-item label="渠道状态" prop="status" style="width: 50%;margin-right: 35px;">
              <el-select
                 v-model="form.status"
                 clearable
                 filterable
                 placeholder="请选择"
                 style="width: 100%"
                 :disabled="isView"
               >
                 <el-option
                   v-for="(item, index) in statusOption"
                   :key="index"
                   :label="item.label"
                   :value="item.value"
                 ></el-option>
               </el-select>
            </el-form-item> -->
            <el-form-item label="渠道撞库限时" prop="timeOut" style="width: 50%;margin-right: 35px;">
              <el-input-number 
                v-model="form.timeOut" 
                controls-position="right" 
                placeholder="渠道撞库限时(单位毫秒)"
                :min="0" 
                style="width: 100%;"
                :disabled="isView"
              >
              </el-input-number>
            </el-form-item>
            <el-form-item label="最低售价金额" prop="sellMoney" style="width: 50%;">
              <el-input-number 
                v-model="form.sellMoney" 
                controls-position="right" 
                placeholder="最低售价金额（固价为渠道价格-元）"
                :min="0" 
                style="width: 100%;"
                :disabled="isView"
              >
              </el-input-number>
            </el-form-item>
          </div>
          <div class="flex-sb">
            <el-form-item label="流程模式" prop="halfStatus" style="width: 50%;padding-right: 20px;">
              <el-radio-group 
              @change="changeSelect('isOur')"
              v-removeAriaHidden v-model="form.halfStatus" :disabled="isView">
                <el-radio v-for="(item,index) in halfStatusOption" :key="index" :label="item.value">{{ item.label }}</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item 
              v-if="form.halfStatus==1"
              label="是否必跳我方授权" prop="isOur" style="width: 50%;padding-left: 20px;">
              <el-radio-group v-removeAriaHidden v-model="form.isOur" :disabled="isView">
                <el-radio v-for="(item,index) in isOurOption" :key="index" :label="item.value">{{ item.label }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
          <div class="flex-sb">
            <el-form-item label="是否是采量渠道" prop="isPick" style="width: 50%;padding-right: 20px;">
              <el-radio-group 
              @change="isPickChange"
              v-removeAriaHidden v-model="form.isPick" :disabled="isView">
                <el-radio v-for="(item,index) in isPickOption" :key="index" :label="item.value">{{ item.label }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
          <div class="flex-sb" v-if="form.isPick == 1">
            <el-form-item label="最低评分" prop="pickMin" style="width: 50%;">
              <div class="pickContent" style="display: flex;flex-wrap: wrap;width: 100%;">
                   <el-input-number 
                     v-model="form.pickMin" 
                     controls-position="right" 
                     placeholder="请输入"
                     :min="-1" 
                     style="flex: 1;"
                     :disabled="isView || pickMinDisableState"
                     >
                   </el-input-number>
                  <div class="pickMinBtn" style="width: 50px;">
                    <el-button 
                      size="small" 
                      type="primary" 
                      :disabled="isView"
                      @click="clickPickMin"
                      >置默</el-button>
                  </div>
              </div>
            </el-form-item>
            <el-form-item label="最高评分" prop="pickMax" style="width: 50%;padding-left: 35px;margin-right: 35px;">
              <div class="pickContent" style="display: flex;flex-wrap: wrap;width: 100%;">
                  <el-input-number 
                    v-model="form.pickMax" 
                    controls-position="right" 
                    placeholder="请输入"
                    :min="-1" 
                    style="flex: 1;"
                    :disabled="isView || pickMaxDisableState"
                    >
                  </el-input-number>
                  <div class="pickMaxBtn" style="width: 10px;">
                    <el-button 
                      size="small" 
                      type="primary" 
                      @click="clickPickMax"
                      :disabled="isView">置默</el-button>
                  </div>
              </div>
            </el-form-item>
          </div>
          <div class="flex-sb" v-if="form.isPick == 1">
            <el-form-item label="采量模式" prop="pickType" style="flex: 1;">
              <el-checkbox-group v-model="form.pickType" :disabled="isView">
               <el-checkbox 
                v-for="(item,index) in pickTypeOption" 
                :key="index" 
                :label ="item.key">{{ item.value }}</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </div>
          <div class="flex-sb">
            <el-form-item label="掩码类型" prop="maskLen" style="width: 50%;padding-right: 20px;">
              <el-radio-group v-removeAriaHidden v-model="form.maskLen" :disabled="isView">
                <el-radio 
                 v-for="(item,index) in maskLenOption" 
                 :key="index" 
                 :label="item.value">{{ item.label }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
             <el-form-item label="撞库类型" prop="isAll" style="width: 50%;padding-left: 20px;">
              <el-radio-group v-removeAriaHidden v-model="form.isAll" :disabled="isView">
                <el-radio 
                 v-for="(item,index) in isAllOption" 
                 :key="index" 
                 :label="item.value">{{ item.label }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
          <div class="flex-sb">
            <el-form-item label="车抵" prop="isCar" style="width: 50%;padding-right: 20px;">
              <el-radio-group v-removeAriaHidden v-model="form.isCar" :disabled="isView">
                <el-radio 
                 v-for="(item,index) in isCarOption" 
                 :key="index" 
                 :label="item.value">{{ item.label }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
        </div>  
     </div>
    <!-- 渠道产品配置 -->
    <div class="channelProductConfig">
      <div class="ch_title">渠道产品配置</div>
      <div class="content">
        <template v-if="form.isPick != 1">
          <div style="display: flex;">
            <el-form-item label="产品限制" prop="isProduct" style="width: 50%;margin-right: 35px;">
              <el-radio-group 
                v-removeAriaHidden 
                v-model="form.isProduct" 
                :disabled="isView"
                @change="changeSelect('productIds')"
                >
                <el-radio 
                 v-for="(item,index) in isProductOption" 
                 :key="index" :label="item.value">{{ item.label }}
                </el-radio>
              </el-radio-group>
              <el-form-item 
                v-if="form.isProduct"
                :label="`${ArrayFormatObj(isProductOption)[form.isProduct]}`"
                prop="productIds" style="flex: 1;">
                <el-select
                 v-model="form.productIds"
                 multiple
                 clearable
                 filterable
                 placeholder="请选择"
                 style="width: 100%"
                 :disabled="isView"
                >
                  <el-option
                   v-for="(item, index) in productIdsOption"
                   :key="index"
                   :label="item.productName"
                   :value="item.id.toString()"
                   ></el-option>
                </el-select>
              </el-form-item>
            </el-form-item>
            <el-form-item label="是否限量" prop="isPush" style="width: 50%;">
               <el-radio-group 
                @change="changeSelect('pushNum')"
                v-removeAriaHidden v-model="form.isPush" :disabled="isView">
                 <el-radio 
                  v-for="(item,index) in isPushOption" 
                  :key="index" :label="item.value">{{ item.label }}
                 </el-radio>
               </el-radio-group>
               <el-form-item 
               v-if="form.isPush"
               label="上游产品限量" prop="pushNum" style="flex: 1;">
                  <el-input-number 
                    v-model="form.pushNum" 
                    controls-position="right" 
                    placeholder="请输入"
                    :min="0" 
                    style="width: 100%;"
                    :disabled="isView"
                  >
                  </el-input-number>
               </el-form-item>
            </el-form-item>
          </div>
          <div style="display: flex;justify-content: flex-end;">
            <!-- <el-form-item label="是否抽金" prop="isExtract" style="width: 50%;margin-right: 35px;">
              <el-radio-group 
                @change="changeSelect('extractRatio')"
                v-removeAriaHidden v-model="form.isExtract" :disabled="isView">
                <el-radio 
                 v-for="(item,index) in isExtractOption" 
                 :key="index" :label="item.value">{{ item.label }}
                </el-radio>
              </el-radio-group>
             <el-form-item 
               v-if="form.isExtract"
               label="抽金比例" prop="extractRatio" style="flex: 1;">
               <el-input-number 
                 v-model="form.extractRatio" 
                 controls-position="right" 
                 placeholder="请输入"
                 :min="0" 
                 style="width: 100%;"
                 :disabled="isView"
               >
               </el-input-number>
              </el-form-item>
            </el-form-item> -->
            <el-form-item
            v-if="form.isMd5 === 1"
             label="MD5通过方式" prop="isPass" style="width: 50%;padding-left: 20px;">
              <el-radio-group
                @change="changeSelect('passNum')"
                v-removeAriaHidden v-model="form.isPass" :disabled="isView">
                <el-radio 
                 v-for="(item,index) in isPassOption" 
                 :key="index" :label="item.value">{{ item.label }}
                </el-radio>
              </el-radio-group>
              <el-form-item 
              v-if="form.isPass"
              label="MD5限制时间" prop="passNum" style="flex: 1;">
              <el-input-number 
                v-model="form.passNum" 
                controls-position="right" 
                placeholder="请输入"
                :min="0" 
                style="width: 100%;"
                :disabled="isView"
              >
              </el-input-number>
              </el-form-item>
            </el-form-item>
          </div>
          <div class="flex-sb">
            <el-form-item label="方案限制" prop="caseType" style="width: 50%;margin-right: 35px;">
              <el-select
                 v-model="form.caseType"
                 clearable
                 filterable
                 placeholder="请选择"
                 style="width: 100%"
                 :disabled="isView"
               >
                 <el-option
                   v-for="(item, index) in caseTypeOption"
                   :key="index"
                   :label="item.label"
                   :value="item.value"
                 ></el-option>
               </el-select>
            </el-form-item>
            <el-form-item label="MMD5校验方式" prop="isMd5" style="width: 50%;">
              <el-select
               v-model="form.isMd5"
               clearable
               filterable
               placeholder="请选择"
               style="width: 100%"
               :disabled="isView"
               @change="changeSelect(['isPass','passNum'])"
              >
                <el-option
                 v-for="(item, index) in isMd5Option"
                 :key="index"
                 :label="item.label"
                 :value="item.value"
                 ></el-option>
              </el-select>
            </el-form-item>
          </div>
        </template>

          <div class="flex-sb">
            <el-form-item 
            v-if="form.isPick != 1"
            label="外部加解密偏移量" prop="outAesIv" style="width: 50%;margin-right: 35px;">
              <el-input
                v-model="form.outAesIv"
                placeholder="请输入"
                clearable
                style="width: 100%"
                :disabled="isView"
              />
            </el-form-item>
            <el-form-item label="外部加解密消息体 aesKey" prop="outAesKey" style="width: 50%;">
              <el-input
                v-model="form.outAesKey"
                placeholder="请输入"
                clearable
                style="width: 100%"
                :disabled="isView"
              />
            </el-form-item>
          </div>
        <template v-if="form.isPick != 1">
          <div class="flex-sb">
            <el-form-item label="外部私钥" prop="outPrivateKey" style="width: 50%;margin-right: 35px;">
              <el-input
                v-model="form.outPrivateKey"
                placeholder="请输入"
                clearable
                style="width: 100%"
                :disabled="isView"
              />
            </el-form-item>
            <el-form-item label="外部公钥" prop="outPublicKey" style="width: 50%;">
              <el-input
                v-model="form.outPublicKey"
                placeholder="请输入"
                clearable
                style="width: 100%"
                :disabled="isView"
              />
            </el-form-item>
          </div>
          <div class="flex-sb">
            <el-form-item label="数据推送限制" prop="pushType" style="width: 50%;margin-right: 35px;">
              <el-select
                 v-model="form.pushType"
                 clearable
                 filterable
                 placeholder="请选择"
                 style="width: 100%"
                 :disabled="isView"
               >
                 <el-option
                   v-for="(item, index) in pushTypeOption"
                   :key="index"
                   :label="item.label"
                   :value="item.value"
                 ></el-option>
               </el-select>
            </el-form-item>
            <el-form-item label="机构数据权重" prop="pushWeight" style="width: 50%;">
              <el-select
               v-model="form.pushWeight"
               clearable
               filterable
               placeholder="请选择"
               style="width: 100%"
               :disabled="isView"
              >
                <el-option
                 v-for="(item, index) in pushWeightOption"
                 :key="index"
                 :label="item.label"
                 :value="item.value"
                 ></el-option>
              </el-select>
            </el-form-item>
          </div>
        </template>
          <div class="flex-sb">
            <el-form-item
              v-if="form.isPick != 1"  
              label="回调地址" prop="backUrl" style="width: 50%;margin-right: 35px;">
              <el-input
                :disabled="isView"
                v-model="form.backUrl"
                placeholder="请输入"
                clearable
                style="width: 100%"
              />
            </el-form-item>
            <el-form-item  
              label="回调方法" prop="backClass" style="width: 50%;">
              <el-input
                :disabled="isView"
                v-model="form.backClass"
                placeholder="请输入"
                clearable
                style="width: 100%"
              />
            </el-form-item>
          </div>
          <div v-if="form.isPick != 1" class="flex-sb">
            <el-form-item label="备注" prop="remarks" style="flex: 1;">
              <el-input
                v-model="form.remarks"
                placeholder="请输入"
                type="textarea"
                clearable
                :disabled="isView"
              />
            </el-form-item>
          </div>
      </div>
    </div>
    <!-- 渠道结算规则 -->
    <div class="settlementRules">
      <div class="ch_title">渠道结算规则</div>
      <div class="content">
        <div style="display: flex;">
            <el-form-item label="结算模式" prop="upRewardType" style="width: 50%;margin-right: 35px;">
              <el-radio-group
                @change="changeSelect(['upPriceMoney','upRewardRatio'])"
                v-removeAriaHidden v-model="form.upRewardType" :disabled="isView">
                <el-radio v-for="(item,index) in upRewardTypeOption" :key="index" :label="item.value">{{ item.label }}</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item :label-width="device === 'desktop'?'80px':''" v-if="form.upRewardType === 0" label="渠道价格" prop="upPriceMoney" style="width: 50%;">
              <el-input-number 
                v-model="form.upPriceMoney" 
                controls-position="right" 
                placeholder="渠道价格(上游抽取我们的价格-单位元)"
                :min="0" 
                style="width: 100%;"
                :disabled="isView"
              >
              </el-input-number>
            </el-form-item>
            <el-form-item :label-width="device === 'desktop'?'80px':''" v-if="form.upRewardType === 1" label="结算比例" prop="upRewardRatio" style="width: 50%">
              <el-input-number 
                v-model="form.upRewardRatio" 
                controls-position="right" 
                placeholder="请输入"
                :min="0" 
                style="width: 100%;"
                :disabled="isView"
              >
              </el-input-number>
            </el-form-item>
        </div>
      </div> 
    </div>
   </el-form>
   <!--  提交按钮区域-->
   <div class="btn flex-center" v-if="!isView">
     <el-button @click="clickCancle">取 消</el-button>
     <el-button type="primary" @click="handleSubmit('formRef')">保存</el-button>
   </div>
  </div>
</template>

<script>
import {getUpCompanyList} from '@/api/business/upCompanyManagement'
import {addOrEditUpChannel,getUpChannelById} from '@/api/business/channelManagement'
import { getDownProductList } from "@/api/business/productManagement";
import {getPickType} from "@/api/business/upPickManagement"
import { mapGetters } from "vuex";

export default {
  name: 'Detail',
  data() {
    return {
      // 表单信息
      form: {
        collisionCategory:[],
        collisionType:[],
        // 结算模式设置默认值
        upRewardType:0,
        pickType:[]
      },
      // 路由参数对象
      query:{
        
      },
      // 表单校验规则
      rules: {
        productName:[
          { required: true, message: "请填写渠道名称", trigger: "blur" },
        ],
        productType:[
          { required: true, message: "请选择渠道类别", trigger: "change" },
        ],
        companyId:[
          { required: true, message: "请选择关联公司", trigger: "change" },
        ],
        channelAlias:[
          { required: true, message: "请填写渠道别名", trigger: "blur" },
        ],
        mannagePerson:[
          { required: true, message: "请选择公司管理人", trigger: "change" },
        ],
        fixedPrice:[
          { required: true, message: "请填写固定价", trigger: "change" },
        ],
        dividendRatio:[
          { required: true, message: "请填写分润比例", trigger: "change" },
        ],
        lowestChannelPrice:[
          { required: true, message: "请填写渠道最低价", trigger: "change" },
        ]
      },
      // 渠道类别筛选项
      productTypeOption:[
        { label: "api全流程", value: 1 },
        { label: "api半流程", value: 2 },
        { label: "H5半流程", value: 3 },
      ],
      // 渠道标签筛选项
      productLabelOption:[
        { label: "平台", value: 1 },
        { label: "机构", value: 2 },
      ],
      // 渠道状态筛选项
      statusOption:[
        { label: "在线", value: 0 },
        { label: "下线", value: 1 },
        { label: "停用", value: 2 },
      ],
      // 模式流程筛选项
      halfStatusOption:[
        { label: "新模式", value: 0 },
        { label: "旧模式", value: 1 },
      ],
      // 是否必跳我方授权筛选项
      isOurOption:[
       { label: "否", value: 0 },
       { label: "是", value: 1 },
      ],
      // 是否是采量渠道
      isPickOption:[
        { label: "否", value: 0 },
        { label: "是", value: 1 },
      ],
      // 菜量模式
      pickTypeOption:[],
      // 掩码类型
      maskLenOption:[
        { label: "MD5撞库", value: 0 },
        { label: "表单直推", value: 1 },
        { label: "八位掩码", value: 8 },
        { label: "九位掩码", value: 9 },
      ],
      // 撞库类型
      isAllOption:[
        { label: "全资", value: 0 },
        { label: "非全资", value: 1 },
      ],
      // 车抵
      isCarOption:[
        { label: "否", value: 0 },
        { label: "是", value: 1 },
      ],
      // 产品限制筛选项
      isProductOption:[
        { label: "无限制", value: 0 },
        { label: "排除产品", value: 1 },
        { label: "包含产品", value: 2 },
      ],
      // 上游产品是否限量筛选项
      isPushOption:[
        { label: "否", value: 0 },
        { label: "是", value: 1 },
      ],
      // 产品列表筛选项
      productIdsOption:[],
      // 是否抽金筛选项
      isExtractOption:[
        { label: "否", value: 0 },
        { label: "是", value: 1 },
      ],
      // 方案限制筛选项
      caseTypeOption:[
        { label: "无限制", value: 0 },
        { label: "只推api全流程", value: 1 },
        { label: "只推api半流程", value: 2 },
        { label: "H5半流程", value: 3 },
      ],
      // MMD5校验方式筛选项
      isMd5Option:[
        { label: "全局", value: 0 },
        { label: "本渠道", value: 1 },
        { label: "无需校验", value: 2 },
      ],
      // MD5通过方式筛选项
      isPassOption:[
        { label: "无限制", value: 0 },
        { label: "单次", value: 1 },
      ],
      // 数据推送限制筛选项
      pushTypeOption:[
        { label: "无限制", value: 0 },
        { label: "只推平台", value: 1 },
        { label: "只推机构", value: 2 },
      ],
      // 数据推送限制筛选项
      pushWeightOption:[
        { label: "撞库", value: 0 },
        { label: "直推", value: 1 },
      ],
      // 结算模式筛选项
      upRewardTypeOption:[
        { label: "固定", value: 0 },
        { label: "分润", value: 1 },
      ],
      // 关联公司筛选项
      companyIdOption: [],
      // 详情信息加载状态
      loading:false,
      // 最低评分禁用状态
      pickMinDisableState:false,
      // 最低评分禁用状态
      pickMaxDisableState:false
    };
  },
  created(){
    this.getcompanyIdList()
    this.getProductList()
    this.getRelatedType()
    console.log('传过来的参数',this.$route.query);
    if(this.$route?.query?.id){
      this.query = this.$route.query
      this.getChannelById(this.$route.query?.id)
    }
  },
  computed:{
     ...mapGetters(["device"]),
     // 将数组转换为对象形式
     ArrayFormatObj:()=>{
        return (arr)=>{
          return arr.reduce((pre, cur)=>{
            pre[cur.value] = cur.label;
            return pre;
          },{})
        }
     },
    // 判断当前是否处于查看操作
    isView(){
      return this.query?.type == "view"
    },
    // 判断当前是否处于新增操作
    isAdd(){
      return !!this.query?.id
    }
  },
  methods: {
     // 是否是采量渠道改变回调
     isPickChange(){
      this.changeSelect([
        [this.form?.isPick].includes(0)?'pickMin':null,
        [this.form?.isPick].includes(0)?'pickMax':null,
      ])
      // 设置默认值
      // 最低评分禁用状态
      this.pickMinDisableState=false
      // 最低评分禁用状态
      this.pickMaxDisableState=false,
      this.$set(this?.form,'pickType',[])
     },
     // 点击设置最小评分默认值
     clickPickMin(){
       this.pickMinDisableState = !this.pickMinDisableState
       this.$set(this.form,'pickMin','-1')
     },
     // 点击设置最高评分默认值
     clickPickMax(){
       this.pickMaxDisableState = !this.pickMaxDisableState
       this.$set(this.form,'pickMax','-1')
     },
     // 获取相关模式
     getRelatedType() {
        getPickType().then((res) => {
          this.pickTypeOption = res?.data;
        });
     },
     // 根据渠道id查询渠道详细信息
     getChannelById(id){ 
      this.loading = true;
       getUpChannelById(id).then(res=>{
          console.log(res);
          this.form = res?.data
          // 设置置默按钮禁用状态
          this.pickMinDisableState = res?.data?.pickMin == -1 ? true : false
          this.pickMaxDisableState = res?.data?.pickMax == -1 ? true : false
          // 采量模式单独处理
          this.$set(this.form,'pickType', res?.data?.pickType.split(',').map(item=>Number(item)))
          this.loading = false          
       })
     },
     // 获取关联公司列表
     getcompanyIdList() {
      getUpCompanyList().then((res) => {
        this.companyIdOption = res.data;
      });
    },
    // 获取产品筛选项列表
    getProductList(){
      // 获取下游产品列表
      getDownProductList().then((res) => {
        this.productIdsOption = res.data;
      });
    },
    // 切换选择器删除控制的属性
    changeSelect(prop,defalutValue){
      // 如果是数组则循环删除
      if(Array.isArray(prop)){
        prop.forEach(item=>{
          this.deleteProp(item,defalutValue)
        })
      }else{
        this.deleteProp(prop,defalutValue)
      }
    },
    deleteProp(prop,defalutValue){
      if(prop === null) return
       if(prop.includes('.')){
            let [key,value] = prop.split('.')
            if(defalutValue){
              this.$set(this.form[key],value,defalutValue)
              return
            }
            this.$delete(this.form[key],value)
            return
        }
        this.$delete(this.form,prop)
    },
    clickCancle(){
      this.$message.info('取消操作')
      // 关闭当前页签
      this.$store.dispatch('tagsView/delView', this.$route)
      // 返回上一个页面
      this.$router.go(-1)
    },
    /*重置变动数据*/
    remeitForm(){
      this.$refs['formRef'].resetFields();
      this.form = this.$options.data().form;
    },
    /*提交操作*/
    handleSubmit(formName){
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let params={};
          params = JSON.parse(JSON.stringify(this.form))
          console.log(params);
          // 若this?.query?.id不存在表示新增,否则为编辑
          addOrEditUpChannel(params).then(res=>{
              if(res.code === 200) {
                if(!this?.query?.id){
                  this.$message.success('添加成功')
                }else{
                  this.$message.success('编辑成功')
                }
                this.query = {}
                this.remeitForm()
                // 关闭当前页签
                this.$store.dispatch('tagsView/delView', this.$route)
                // 返回上一个页面
                this.$router.go(-1)
              }
            })
        }
      })
    },
  }
};
</script>

<style scoped lang='scss'>
.ch_title{
  color: #409EFF;
  font-weight: 500;
}
.content{
  margin: 20px 0 20px;
  padding: 20px  20px 0;
  background: #fff;
  align-items: flex-start;
  border-radius: 6px;
}

</style>
